<template>
  <div class="drawerForm-wrapper">
    <el-drawer :title="title" :visible.sync="visible" :close-on-click-modal="false" ref="visible" size="836px">
      <div class="container">
        <el-form ref="editform" :model="editform" v-loading="loading" label-width="98px" @submit.native.prevent>
          <div class="car-info-container">
            <section class="left-container">
              <section class="title">车辆信息</section>
            </section>
            <section class="content">
              <el-row :gutter="20">
                <el-col :span="12">
                  <section>

                    <el-form-item v-model="editform.prefix" prop="prefix" class="plateForm">
                      <span style="position: absolute;left:-75px;color: #606266;font-size: 16px"><span style="color:#F56C6C;font-size: 16px;margin-right: 4px;">*</span>车牌号:</span>
                      <section class="hasNumber" @click="editCarNumber">
                        <span v-if="!truckNumber">点击填写车牌号</span>
                        {{truckNumber}}
                      </section>
                      <span v-if="verify" style="position: absolute;top:25px;color: #F56C6C;font-size: 12px;">请您输入车牌号</span>
                    </el-form-item>
                  </section>
                </el-col>

                <el-col :span="4" class="axle">
                  <el-form-item label="车辆类型:" prop="axle.id" :rules="[{required: true, message:'车轴类型必须选择', trigger:'blur'}]">
                    <section style="min-width:115px">
                      <el-select clearable size="small" v-model="editform.axle.id" placeholder="车轴类型">
                        <el-option v-for="item in  axleList" :key="item.id" :label="item.axle" :value="item.id">
                        </el-option>
                      </el-select>
                    </section>

                  </el-form-item>
                </el-col>
                <el-col :span="4" class="type">
                  <el-form-item prop="truckType" :rules="[{required: true, message:'卸车类型必须选择', trigger:'blur'}]">
                    <section style="min-width:120px">
                      <el-select clearable size="small" v-model="editform.truckType" placeholder="卸车类型">
                        <el-option v-for="item in  this.$dictUtils.getDictList('truckType')" :key="item.value" :label="item.label"
                          :value="Number(item.value)">
                        </el-option>
                      </el-select>
                    </section>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="固定皮重:" prop="tareWeight" :rules="[
                  {validator: validator.maxValue, trigger:'blur'}
                 ]">
                    <el-input class="inputAppend-wrapper inputBox" size="small" placeholder="请输入内容" v-thousands.tareWeight="editForm" v-model="editform.tareWeight"
                      maxlength="9" show-word-limit>
                      <template slot="append">吨</template>
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="核载质量:" prop="standardLoad" :rules="[
                  {validator: validator.maxValue, trigger:'blur'}
                 ]">
                    <el-input class="inputAppend-wrapper inputBox" v-thousands.standardLoad="editForm"  placeholder="请输入内容" size="small" v-model="editform.standardLoad"
                      maxlength="9" show-word-limit>
                      <template slot="append">吨</template>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="运输许可证:" prop="transportPermitNumber">
                    <el-input size="small" placeholder="请输入内容" v-model="editform.transportPermitNumber" :maxlength="20"
                      show-word-limit>
                    </el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="行驶证:" prop="vehicleLicenseNumber">
                    <el-input placeholder="请输入内容" size="small" v-model="editform.vehicleLicenseNumber" :maxlength="20"
                      show-word-limit>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>

            </section>
          </div>
          <div class="car-info-container">
            <section class="left-container2">
              <section class="title">司机</section>
            </section>
            <section class="content">

              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="姓名:" prop="driverName">
                    <el-autocomplete placeholder="请输入内容" size="small"
                      :debounce="0" :fetch-suggestions="querySearch2" @select="handleSelect($event,'2')"
                      :trigger-on-focus="true" v-model="editform.driverName" :maxlength="20" show-word-limit>
                      <template slot-scope="{ item }">

                        <section class="querySearch-autocomplete">
                          <section class="name-item">
                            <section class="name"><span v-if="item.value">{{ item.value.substr(0,1) }}</span></section>
                            {{ item.value}}
                            ({{item.contactPhone}})

                          </section>
                          <section>
                          </section>
                        </section>

                        <div></div>
                      </template>
                    </el-autocomplete>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="手机号码:" prop="driverPhone" :rules="[
                  {validator: validator.isMobile, trigger:'blur'},
                  {validator:checkRepeatPhone, trigger:'blur'}
                 ]">
                    <el-input placeholder="请输入内容" size="small" v-model="editform.driverPhone" class="input-with-select"
                      maxlength="11" show-word-limit>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="证件号码:" prop="driverIdcard" :rules="[
                  {validator: validator.isCardId, trigger:'blur'},
                {validator:checkRepeatisCard, trigger:'blur'}
                 ]">
                    <el-input placeholder="请输入内容" v-model="editform.driverIdcard" size="small" maxlength="18"
                      show-word-limit>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="资格证编号:" prop="credentNumber">
                    <el-input placeholder="请输入内容" v-model="editform.credentNumber" size="small" maxlength="18"
                      show-word-limit>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>

            </section>
          </div>
          <div class="car-info-container" style="height:170px !important">
            <section class="left-container2">
              <section class="title3">车辆证照</section>
            </section>
            <section class="content" style="display:flex;margin-bottom:20px">
              <section class="imageForm imageUploader" style="overflow:visible !important">
                <el-upload class="avatar-uploader" :action="`${this.$http.BASE_URL}/truck/truck/permitImageUpload?oleImgId=${this.editform.transportPermitImageId}`"
                  :headers="{token: $cookie.get('token')}" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"
                  :show-file-list="false">
                  <img v-if="editform.transportPermitImagePath" :src="editform.transportPermitImagePath" class="avatar">
                  <div v-if="editform.transportPermitImagePath" class="delBut">
                    <img src="~@/assets/img/del.png" @click.stop="delImage('transportPermitImageId','transportPermitImagePath')" alt="" style="height:15px">
                  </div>
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <section class="title">
                  运输许可证
                </section>

              </section>
              <section class="imageForm imageUploader">
                <el-upload class="avatar-uploader " :action="`${this.$http.BASE_URL}/truck/truck/licenseImageUpload?oleImgId=${this.editform.vehicleLicenseImageId}`"
                  :headers="{token: $cookie.get('token')}" :on-success="vlimgSuccess" :before-upload="beforeAvatarUpload"
                  :show-file-list="false">

                  <img v-if="editform.vehicleLicenseImagePath" :src="editform.vehicleLicenseImagePath" class="avatar">
                  <div v-if="editform.vehicleLicenseImagePath" class="delBut">
                    <img src="~@/assets/img/del.png" @click.stop="delImage('vehicleLicenseImageId','vehicleLicenseImagePath')" alt="" style="height:15px">
                  </div>
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <section class="title">
                  行驶证(正面)
                </section>
              </section>
              <section class="imageForm imageUploader">
                <el-upload class="avatar-uploader" :action="`${this.$http.BASE_URL}/truck/truck/licenseImageUpload?oleImgId=${this.editform.vehicleLicenseImageId1}`"
                  :headers="{token: $cookie.get('token')}" :on-success="vlimg1Success" :before-upload="beforeAvatarUpload"
                  :show-file-list="false">
                  <img v-if="editform.vehicleLicenseImagePath1" :src="editform.vehicleLicenseImagePath1" class="avatar">
                  <div v-if="editform.vehicleLicenseImagePath1" class="delBut">
                    <img src="~@/assets/img/del.png" @click.stop="delImage('vehicleLicenseImageId1','vehicleLicenseImagePath1')" alt="" style="height:15px">
                  </div>
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <section class="title">
                  行驶证(反面)
                </section>
              </section>
              <section class="imageForm imageUploader">
                <el-upload class="avatar-uploader" :action="`${this.$http.BASE_URL}/truck/truck/truckImageUpload?oleImgId=${this.editform.truckImageId}`"
                  :headers="{token: $cookie.get('token')}" :on-success="truckImageSuccess" :before-upload="beforeAvatarUpload"
                  :show-file-list="false">
                  <img v-if="editform.truckImagePath" :src="editform.truckImagePath" class="avatar">
                  <div v-if="editform.truckImagePath" class="delBut">
                    <img src="~@/assets/img/del.png" @click.stop="delImage('truckImageId','truckImagePath')" alt="" style="height:15px">
                  </div>
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <section class="title">
                  车辆照片(含车牌)
                </section>
              </section>
              <section class="imageForm imageUploader">
                <el-upload class="avatar-uploader" :action="`${this.$http.BASE_URL}/truck/truck/truckImageUpload?oleImgId=${this.editform.truckImageId1}`"
                  :headers="{token: $cookie.get('token')}" :on-success="truckImage1Success" :before-upload="beforeAvatarUpload"
                  :show-file-list="false">
                  <img v-if="editform.truckImagePath1" :src="editform.truckImagePath1" class="avatar">
                  <div v-if="editform.truckImagePath1" class="delBut">
                    <img src="~@/assets/img/del.png" @click.stop="delImage('truckImageId1','truckImagePath1')" alt="" style="height:15px">
                  </div>
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <section class="title">
                  车辆照片
                </section>
              </section>
            </section>
          </div>
        </el-form>


        <section style="width:200px;height:140px;margin:0 auto;margin-top:30px">
          <el-button type="primary" v-if="method != 'view'" @click="doSubmit()" v-noMoreClick style="margin-right: 10px">确定</el-button>
          <el-button @click="visible = false">取消</el-button>
        </section>

      </div>
    </el-drawer>
  </div>
</template>
<script>
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import {
    getSearchlist,
    getDriverSearchlist
  } from '@/api/truck/truckDriver.js'
  export default {
    components: {
      Treeselect,
    },
    data() {
      return {
        state: '',
        values: [],
        verify: false,
        isNumber: false,
        visible: false,
        loading: false,
        method: '',
        title: ' ',
        editform: {
          id: '',
          truckGroup: [],
          truckNumber: '',
          prefix: '',
          truckType: 0,
          tareWeight: '',
          standardLoad: '',
          transportPermitNumber: '',
          vehicleLicenseNumber: '',
          owerName: '',
          owerPhone: '',
          owerIdcard: '',
          owerId: '',
          addressId: '',
          driverName: '',
          driverPhone: '',
          driverIdcard: '',
          driverId: '',
          transportPermitImageId: '',
          vehicleLicenseImageId: '',
          vehicleLicenseImageId1: '',
          truckImageId: '',
          truckImageId1: '',
          transportPermitImagePath: '',
          vehicleLicenseImagePath: '',
          vehicleLicenseImagePath1: '',
          truckImagePath: '',
          truckImagePath1: '',
          axleId: '',
          axle: {
            id: '',
            axle: ''
          },
          type: [],
          group: [],
          credentNumber: '',
          setDriver: '',
          delImageIds: ''
        },
        axleList: [],
        typeList: [],
        prefixList: [],
        options: [] //车辆分组
      }
    },
    computed: {
      truckNumber() { // 可以监听对象的单个属性
        //console.log(this.$store.state.truck.truckNumber)
        this.editform.truckNumber = this.$store.state.truck.truckNumber
        if (this.editform.truckNumber) {
          this.verify = false
        }
        return this.$store.state.truck.truckNumber
        // console.lov(val)
      }
    },
    methods: {
      //删除图片
      delImage(imgId,imgPath) {
        this.editform.delImageIds = this.editform.delImageIds + "," + this.editform[imgId]
        this.editform[imgPath] = ''
        this.editform[imgId] = ''
      },
      normalizer(node) {
        return {
          id: node.id,
          label: node.names,
          children: node.children
        }
      },
      //递归删除空数组
      exec(array) {
        array.forEach(item => {
          if (item.children.length === 0) {
            delete item.children
          } else {
            this.exec(item.children)
          }
        })
      },
      selectValue(val) {
        this.$nextTick(() => {
          if (this.editform.group.length == 3) {
            return false
          }
        })

      },
      init(method, obj) {
        this.method = method
        this.$store.commit('truck/setTruckNumber', '')
        if (method === 'add') {
          this.title = `新增车辆信息`
          for (let key in this.editform) {
            if (key === 'type' || key === 'group') {
              this.editform[key] = []
            } else if (key === 'axle') {
              this.editform[key] = {
                id: '',
                axle: ''
              }
            } else {
              this.editform[key] = ''
            }
          }
        } else if (method === 'edit') {
          this.title = '修改车辆信息'
          this.editform.id = obj.id
        } else if (method === 'view') {
          this.title = '查看车辆信息'
          this.editform.id = obj.id
        }
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.$refs.editform.resetFields()
          if (method === 'edit' || method === 'view') { // 修改或者查看
            this.loading = true
            this.$http({
              url: `/truck/truck/queryById?id=${this.editform.id}`,
              method: 'get'
            }).then(({
              data
            }) => {
              if (data.success) {
                this.editform = this.recover(this.editform, data.result)
                this.$store.commit('truck/setTruckNumber', this.editform.truckNumber)
                sessionStorage.setItem("truckNumberArry", JSON.stringify(data.result.number));
                // console.log(JSON.parse(sessionStorage.getItem("truckNumberArry")))
                // this.$store.commit('truck/setTruckNumberArry', data.result.number)
                this.loading = false
              } else {
                this.loading = false
                this.visible = false
              }
            })
          }
          this.loading = true
          //车牌前缀
          this.$http({
            url: `/truck/prefix/querylist`,
            method: 'get'
          }).then(({
            data
          }) => {
            this.prefixList = data.result
          })
          //车轴类型
          this.$http({
            url: `/truck/truckAxle/allList`,
            method: 'get'
          }).then(({
            data
          }) => {
            this.axleList = data.result
          })
          //树形车辆分组
          this.$http({
            url: `/truck/truckGroup/treeData`,
            method: 'get'
          }).then(({
            data
          }) => {

            this.options = data.result
            this.exec(this.options)
          })
          this.loading = false
        })
      },
      //填写车牌号
      editCarNumber() {
        let that = this;
        this.$nextTick(() => {
          that.$parent.$refs.plateDialog.dialogVisible = true;
        })
      },
      saveLocal(val, filed) {
        // let val2={value:''}
        // val2.value=val
        // this.values.push(val2)
        // this.Es5duplicate(this.values,'value')
      },
      //车主信息输入后匹配输入建议
      querySearch(queryString, cb) {
        if (queryString) {
          getSearchlist({
            selectValue: queryString,
            state: 1
          }).then((res) => {
            // console.log(res)
            if (res.data.code === '200') {

              this.values = []
              for (let index = 0; index < res.data.result.length; index++) {
                let element = {
                  value: '',
                  contactPhone: '',
                  idCard: '',
                  id: ''
                }
                element.value = res.data.result[index].names
                element.contactPhone = res.data.result[index].contactPhone
                element.idCard = res.data.result[index].idCard
                element.id = res.data.result[index].id
                this.values.push(element);
              }
              cb(this.values)
            }
          })



        }
        // 调用 callback 返回建议列表的数据
      },
      //常用司机搜索
      querySearch2(queryString, cb) {
          console.log(1)
          getDriverSearchlist({//后台地址
            selectValue: queryString,
            state: 1
          }).then((res) => {
            // console.log(res)
            if (res.data.code === '200') {
              this.values = []
              for (let index = 0; index < res.data.result.length; index++) {
                let element = {
                  value: '',
                  contactPhone: '',
                  idCard: '',
                  id: '',
                  credentNumber: ''
                }
                element.value = res.data.result[index].name
                element.contactPhone = res.data.result[index].phone
                element.idCard = res.data.result[index].idcard
                element.id = res.data.result[index].id
                element.credentNumber = res.data.result[index].credentNumber
                this.values.push(element);
              }
              cb(this.values)//返回搜索下拉框里面数据
            }
          })

        // 调用 callback 返回建议列表的数据
      },
      checkRepeatPhone(rule, value, callback) {
        if (value) {
          this.$http({
            url: `/truck/driver/validate`,
            method: 'get',
            params: {
              'id': this.editform.driverId,
              'phone': value
            }
          }).then(({
            data
          }) => {
            if (data.code !== '200') {
              callback(new Error(data.message))
            } else {
              callback()
            }
          })
        } else {
          callback()
        }
      },
      checkRepeatisCard(rule, value, callback) {
        if (value) {
          this.$http({
            url: `/truck/driver/validate`,
            method: 'get',
            params: {
              'id': this.editform.driverId,
              'idcard': value
            }
          }).then(({
            data
          }) => {
            if (data.code !== '200') {
              callback(new Error(data.message))
            } else {
              callback()
            }
          })
        } else {
          callback()
        }
      },
      //操作点击选择搜索到的数据可以不要
      handleSelect($event, item) {
        console.log(1111111)
        if (item === '1') {
          this.editform.owerId = $event.id
          this.editform.owerPhone = $event.contactPhone
          this.editform.owerIdcard = $event.idCard
        } else if (item === '2') {
          this.editform.driverPhone = $event.contactPhone
          this.editform.driverIdcard = $event.idCard
          this.editform.driverId = $event.id
          this.editform.credentNumber = $event.credentNumber
        }

      },
      // 文件上传成功后方法
      handleAvatarSuccess(res, file) {
        this.editform.delImageIds = this.editform.delImageIds + "," + this.editform.transportPermitImageId
        this.editform.transportPermitImageId = res.result.id
        this.editform.transportPermitImagePath = res.result.filePath
      },
      // 文件上传校验
      beforeAvatarUpload(file) {
        const isJPG = file.type.indexOf('image/') >= 0
        const isLt5M = file.size / 1024 / 1024 < 5

        if (!isJPG) {
          this.$message.error('上传只能是图片格式!')
          return false
        }
        if (!isLt5M) {
          this.$message.error('上传图片大小不能超过 5MB!')
          return false
        }
        return true
      },
      vlimgSuccess(res, file) {
        this.editform.delImageIds = this.editform.delImageIds + "," + this.editform.vehicleLicenseImageId
        this.editform.vehicleLicenseImageId = res.result.id
        this.editform.vehicleLicenseImagePath = res.result.filePath
      },
      vlimg1Success(res, file) {
        this.editform.delImageIds = this.editform.delImageIds + "," + this.editform.vehicleLicenseImageId1
        this.editform.vehicleLicenseImageId1 = res.result.id
        this.editform.vehicleLicenseImagePath1 = res.result.filePath
      },
      truckImageSuccess(res, file) {
        this.editform.delImageIds = this.editform.delImageIds + "," + this.editform.truckImageId
        this.editform.truckImageId = res.result.id
        this.editform.truckImagePath = res.result.filePath
      },
      truckImage1Success(res, file) {
        this.editform.delImageIds = this.editform.delImageIds + "," + this.editform.truckImageId1
        this.editform.truckImageId1 = res.result.id
        this.editform.truckImagePath1 = res.result.filePath
      },
      handleClose(done) {
        this.$Msg.confirm({
          title: '您确定要关闭吗？',
          content: this.GLOBAL.FORM_CLOSE_TIPS,
          confirmCall: () => {
            done();
          }
        })
      },
      //将车主设置为司机
      setDriver(obj) {
        if (this.editform.setDriver) {
          this.editform.driverIdcard = this.editform.owerIdcard
          this.editform.driverName = this.editform.owerName
          this.editform.driverPhone = this.editform.owerPhone
        } else {
          this.editform.driverIdcard = ''
          this.editform.driverName = ''
          this.editform.driverPhone = ''
        }

      },
      // 车牌重复
      checkRepeatTruckNumber(rule, value, callback) {
        value = this.editform.prefix + value
        // console.log(value)
        if (value) {
          this.$http({
            url: `/truck/truck/validate`,
            method: 'get',
            params: {
              'id': this.editform.id,
              'truckNumber': value
            }
          }).then(({
            data
          }) => {
            if (data.code !== '200') {
              callback(new Error(data.message))
            } else {
              callback()
            }
          })
        } else {
          callback()
        }
      },
      // 表单提交
      doSubmit() {
        this.$refs['editform'].validate((valid) => {
          if (!this.editform.truckNumber) {
            this.verify = true
          }
          if (valid) {
            if (!this.verify) {
              this.loading = true
              this.$http({
                url: `/truck/truck/save`,
                method: 'post',
                data: this.editform
              }).then(({
                data
              }) => {
                if (data && data.code === '200') {
                  this.visible = false
                  this.$message.success(data.message)
                  this.$emit('refreshDataList')
                }
                this.loading = false
              })
            }
          }
        })
      }
    },
    mounted() {}
  }
</script>
<style lang="scss" scoped>
  @import '@/assets/scss/config.scss';

  section.name {
    margin-right: 8px;
  }

  .drawerForm-wrapper {
    ::v-deep.el-drawer.rtl {
      .el-drawer__body {
        padding: 0 0 0 30px;

        .el-form .el-form-item .el-input {
          width: 100%;
        }

        .el-input.el-input--suffix .el-input__icon {
          line-height: 32px;
        }

        .inputAppend-wrapper.el-input {
          .el-input__inner {
            width: 100% !important;
          }
        }

        .type {
          .el-checkbox-group {
            height: 32px;
          }
        }

        .el-autocomplete-suggestion li {
          padding: 0 10px;
          font-size: 14px;
        }

        .content {
          width: calc(100% - 35px);
          margin: 20px 10px 0px 10px;

          .el-autocomplete {
            width: 100%;
          }
        }
      }
    }
  }

  ::v-deep .avatar-uploader .el-upload {
    overflow: visible;
  }

  // .avatar-uploader .el-upload:hover {

  //     border-color: #409EFF;

  //   }
  ::v-deep .el-form .truck-group {

    .el-form-item__label,
    .el-form-item__content {
      /*line-height: 40px !important;*/
    }

    .treeselect-adjust.vue-treeselect {
      line-height: 18px;

      .vue-treeselect__multi-value-item {
        padding-right: 5px;

        .vue-treeselect__multi-value-label {
          padding-right: 3px;
        }

        .vue-treeselect__value-remove {
          border-left: none;
          width: 10px;
          height: 10px;
          padding: 0;
          /*border-radius: 4px;*/
          /*display: inline-block;*/
          text-align: center;

          >svg {
            width: 6px;
            height: 6px;
          }
        }
      }
    }
  }

  .imageUploader {
    position: relative;

    .delBut {
      position: absolute;
      top: -13px;
      right: -4px;
      width: 13px;
      height: 13px;
    }

    .title {
      text-align: center;
      margin-top: 7px;
      color: #606266;
      font-size: 14px;
    }

    /*.title2{
    position: absolute;
    bottom: 22px;
    left: -5px;
  }
  .title4{
    position: absolute;
    bottom: -32px;
    left: 10px;
  }*/
    .el-upload-list__item-actions {
      // filter:alpha(opacity=80);
      background: #000;
      color: #fff;
      opacity: 0.5;
      display: block !important;
      position: absolute;
      width: 102px;
      height: 102px;
      top: 0px;

      .el-upload-list__item-preview {
        line-height: 102px;
        margin-right: 10px;


      }
    }
  }

  .axle ::v-deep .el-input--small .el-input__inner {
    width: 100px !important;
  }

  .avatar-uploader ::v-deep .el-upload {
    border: 1px solid #d9d9d9 !important;
    border-radius: 6px;
    cursor: pointer;
    margin-left: -0px;
    ;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  ::v-deep .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 102px;
    height: 102px;
    line-height: 102px !important;
    text-align: center;
  }

  .avatar {
    width: 102px;
    height: 102px;
    display: block;
    object-fit: fill
  }

  .hasNumber {
    cursor: pointer;
    width: 100%;
    height: 32px;
    background: $--color-primary-liyu;
    border-radius: 4px;
    text-align: center;
    color: #fff;
    line-height: 32px;

    span {
      font-size: 14px;
    }
  }

  .plateForm {
    position: relative;

  }

  .imageForm {
    border-radius: 5px;
    margin-left: 35px;
  }

  .container {

    width: 100%;
    height: 100vh;
    overflow: auto;
  }

  span {
    /*font-size: 16px;*/
  }

  ::v-deep .el-drawer__header {
    margin-bottom: 30px;
  }

  ::v-deep .el-input--small .el-input__inner {
    height: 32px !important;
    width: 100% !important;
  }

  .car-info-container {
    width: 759px;
    display: flex;
    margin: 0 auto;
    margin-bottom: 10px;
    width: 759px;
    background: #ffffff;
    border: 1px solid #dddddd;
    box-shadow: 0px 0px 5px 0px rgba(51, 51, 51, 0.05);
    border-radius: 4px;
  }

  .left-container {
    position: relative;
    width: 35px;
    background: #eeeeee;

    .title {
      position: absolute;
      top: 35%;
      left: 19%;
      width: 20px;
      margin: 0 auto;
      line-height: 24px;
      font-size: 18px;
    }
  }

  .left-container2 {
    position: relative;
    width: 35px;
    background: #eeeeee;

    .title {
      position: absolute;
      top: 8.5%;
      left: 19%;
      width: 20px;
      margin: 0 auto;
      line-height: 24px;
      font-size: 18px;
    }

    .title3 {
      position: absolute;
      top: 16.5%;
      left: 19%;
      width: 20px;
      margin: 0 auto;
      line-height: 24px;
      font-size: 18px;
    }
  }

  .select ::v-deep .el-select {
    padding-right: 0px;
  }

  // input{
  //   height: 32px !important;
  // }
  .el-select {
    padding-right: 10px;
  }

  .select ::v-deep .el-input__inner {
    height: 32px;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px 0px 0px 4px !important;
  }

  .input ::v-deep .el-form-item__error {
    width: 200px;

  }

  .input ::v-deep .el-input--small .el-input__inner {
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 0px 4px 4px 0px !important;
    width: 166px;
  }
</style>
